<!-- 基础利率配置 -->
<template>
  <div class="rate-list">
    <Table ref="TableHeight" :max-height="onresizeHeight" :columns="columns" :data="list">
    </Table>

    <!-- 设置 -->
    <Modal v-model="setVisible" width="450" title="设置">
      <Form ref="setForm" :model="setItem" :rules="setRule" :label-width="130">
        <FormItem :label="setItem.name" prop="rate">
          <Input v-model="setItem.rate" type="number" placeholder="请填写利率">
          <span slot="append">%</span>
          </Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="onClose">取消</Button>
        <Button type="primary" @click="onConfirm">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import generalConfiguration from '@/biz/generalConfiguration/generalConfiguration'

  export default {
    components: {},
    data() {
      const rateValidate = (rule, value, callback) => {
        if (Number(value) <= 0) return callback('利率值必须大于0')
        callback()
      }
      return {
        onresizeHeight: 0,
        list: [],
        columns: [
        {
          title: '利率项',
          key: 'name',
          align: 'center',
        },
        {
          title: '值（%）',
          key: 'rate',
          align: 'center',
        },
        {
          title: '操作',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  props: {
                    color: '#3366ff',
                  },
                  on: {
                    click: (e) => {
                      e.stopPropagation()
                      this.setHandle(params.row) //点击事件
                    },
                  },
                },
                '设置'
              ),
            ])
          },
        }, ],
        setVisible: false,
        setItem: {},
        setRule: {
          rate: [
            { required: true, message: '利率值不能为空', trigger: 'blur' },
            { validator: rateValidate, trigger: 'blur' },
          ],
        },
      }
    },
    created() {
      this.$nextTick(() => {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 70
      })
    },
    mounted() {
      this.getTableList()
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight =
              window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 70
          }, 10)
        })()
      }
    },
    methods: {
      getTableList() {
        generalConfiguration.interestRate().then((res) => {
          this.list = [...res]
        })
      },
      setHandle(data) {
        this.setItem = {
          ...data,
          rate: String(data.rate)
        }
        this.setVisible = true
      },
      // 设置利率值
      onConfirm() {
        this.$refs.setForm.validate((valid) => {
          if (valid) {
            generalConfiguration.interestRateUpdate({
              id: this.setItem.id,
              rate: this.setItem.rate,
            }).then(() => {
              this.$Message.success('设置成功')
              this.onClose()
              this.getTableList()
            })
          }
        })
      },
      onClose() {
        this.setVisible = false
        this.setItem = {}
        this.$refs.setForm.resetFields()
      },
    },
  }
</script>

<style lang='scss' scoped>
  .rate-list {
    padding: 20px 14px 0;
  }
</style>